<script setup>
import {onBeforeMount, ref} from "vue";
import {getSignIn, listTask} from "../../api/course/course.js";
import {defineProps} from "vue"
import TaskManage from "./Mangement/TaskManage.vue";
import router from "../../router/index.js";
import SignInOne from "./Mangement/Task/One/SignInOne.vue";
import {isPermission} from "../../utils/utils.js";

const prop = defineProps(['courseId'])

// 二维数组
const courseTasks = ref([]);
// 进行中任务数量
const doingTaskNumber = ref(0);
// 已结束任务数量
const endTaskNumber = ref(0);
// 是否显示任务对话框
const isTaskDialog = ref(false);
// 是否进行

// 查询任务
const handleListTask = async () => {
  await listTask(prop.courseId).then(res => {
    courseTasks.value = res.data;
    doingTaskNumber.value = courseTasks.value[1].length;
    endTaskNumber.value = courseTasks.value[0].length;
    for( let i=0;i<courseTasks.value[1].length;i++){

    }
    console.log(courseTasks.value);
  })
}
// 进行中图标
const doingTaskIcon=['https://iflytek-education.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240711213741.jpg','https://iflytek-education.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240712184216.png','https://iflytek-education.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240712184233.png','https://iflytek-education.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240712184418.png'];
// 结束图标
const endTaskIcon=['https://iflytek-education.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240711214542.jpg','https://iflytek-education.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240712184224.png','https://iflytek-education.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240712184230.png','https://iflytek-education.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240712184426.png'];

// 是否是签到
const isSignIn=ref(false);
// 点击的任务id
const taskId=ref();
// 选择任务
const handleChooseTask = (courseTask) => {
  taskId.value=courseTask.id;
  if (courseTask.type === 0) {
    console.log("签到");
    handleGetSignIn(courseTask.id);
    isSignIn.value=true;
  } else if (courseTask.type === 1) {
    router.push("/classpracticeone/"+courseTask.id);
  } else if (courseTask.type === 2) {
    router.push("/questionnaireone/"+courseTask.id);
  } else if (courseTask.type === 3) {
    router.push("/topicdiscussone/"+courseTask.id);
  }
}

// 签到信息
const signIn=ref()



// 获取签到信息
const handleGetSignIn=async (taskId)=>{
  await getSignIn(taskId).then((res)=>{
    signIn.value=res.data;
    console.log(signIn.value);
  })
}
// 关闭签到
const handleCloseSignIn=()=>{
  isSignIn.value=false;
}
// 关闭弹窗
const handleCloseDialog = () => {
  isTaskDialog.value=false;
}
// 显示弹窗
const handleShowDialog = () => {
  isTaskDialog.value=true;
}


handleListTask();
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div style="display: flex;align-items: center;height: 5vh">
          <el-button type="primary" style="margin-left: auto" @click="handleShowDialog" v-if="isPermission(2)">任务管理</el-button>
        </div>
        <el-divider/>
      </el-header>
      <el-main>
        <div>进行中（{{ doingTaskNumber }}）</div>
        <el-card style="margin-top: 10px;margin-bottom: 10px" v-for="(courseTask,index) in courseTasks[1]" :key="index" @click="handleChooseTask(courseTask)">
          <div style="display: flex;align-items: center;">
            <img class="task-img" :src="doingTaskIcon[courseTask.type]"/>
            <span>{{ courseTask.name }}</span>
            <div style="margin-left: auto;">
              <span style="margin-right: 20px">结束时间</span>
              <span>{{ new Date(courseTask.endTime).toLocaleString('zh-CN', { month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true }).replace('上午', 'AM').replace('下午', 'PM').replace('AM', '上午').replace('PM', '下午') }}</span>
            </div>
          </div>

        </el-card>
        <div>已结束（{{ endTaskNumber }}）</div>
        <el-card style="margin-top: 10px;margin-bottom: 10px" v-for="(courseTask,index) in courseTasks[0]" :key="index">
          <div style="display: flex;align-items: center;">
            <img class="task-img" :src="endTaskIcon[courseTask.type]" />
            <span>{{ courseTask.name }}</span>
            <div style="margin-left: auto;">
              <span style="margin-right: 20px">结束时间</span>
              <span>{{ new Date(courseTask.endTime).toLocaleString('zh-CN', { month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: true }).replace('上午', 'AM').replace('下午', 'PM').replace('AM', '上午').replace('PM', '下午') }}</span>
            </div>
          </div>
        </el-card>
        <TaskManage v-model="isTaskDialog" @close="handleCloseDialog"></TaskManage>

      </el-main>
    </el-container>
  </div>
  <SignInOne @close="handleCloseSignIn" v-model="isSignIn" :signIn="signIn"></SignInOne>
</template>

<style scoped lang="less">
.task-img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
  border-radius: 2px;
}
</style>